<template>
    <div>
        <el-card class="form-card">
            <template #header>
                <div class="card-header">
                    <span>注册账户</span>
                </div>
            </template>
            <el-tree :data="tree" :props="defaultProps" default-expand-all>
                <template #default="{node,data}">
                    <div class="custom-tree-node">
                        <span>{{ node.label }}</span>
                        <div class="actions">
                            <el-button @click.stop="edit(node,data)" icon="edit" type="primary" size="small" link>按钮
                            </el-button>
                            <el-button @click.stop="add(node,data)" icon="plus" type="success" size="small" link>添加
                            </el-button>
                            <el-button @click.stop="remove(node,data)" icon="delete" type="danger" size="small" link>删除
                            </el-button>
                        </div>
                    </div>
                </template>
            </el-tree>
        </el-card>
        <!-- 添加分类 -->
        <el-dialog v-model="add_dialogVisible" title="添加分类" width="30%">
            <el-form ref="add_formRef" :rules="rules" :model="add_form">
                <el-form-item label="标签名称" prop="name">
                    <el-input v-model="add_form.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="add_dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAdd(add_formRef)">保存</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑分类 -->
        <el-dialog v-model="edit_dialogVisible" title="添加分类" width="30%" :before-close="handleClose">
            <el-form ref="edit_formRef" :rules="rules" :model="edit_form">
                <el-form-item label="标签名称" prop="name">
                    <el-input v-model="edit_form.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="edit_dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click.stop="handleEdit(edit_formRef)">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

</template>
<script setup>
import cate from '@/api/cate';
// import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref, isRef } from 'vue';
//树形结构数据
let tree = ref([]);
const defaultProps = {
    children: 'children',
    label: 'name',
}
onMounted(async () => {
    let { status, msg, data } = await cate.allList({ type: 'tree' });
    if (status) {
        tree.value = [{ id: 0, name: '全部分类', children: data }];
    }
});
let rules = reactive({
    name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
})
//获取form组件实例
let add_formRef = ref();
//添加弹窗
let add_dialogVisible = ref(false);
//添加Model
let add_form = ref({ name: '' });
//当前节点的data
let current_data = ref({});
//当前节点的node
let current_node = ref({});
//打开dialog
let add = (node, data) => {
    // 缓存data数据
    current_data.value = data;
    add_dialogVisible.value = true;
}
//添加分类
let handleAdd = (formEl) => {
    formEl.validate(async (valid) => {
        if (valid) {
            let { status, msg, data } = await cate.insert({ ...add_form.value, parent_id: current_data.value.id });
            if (status) {
                //新节点数据
                const newChild = { ...data, ...add_form.value, children: [] }
                if (!current_data.value.children) {
                    current_data.value.children = []
                }
                current_data.value.children.push(newChild);
                tree.value = [...tree.value];
                //关闭弹窗
                add_dialogVisible.value = false;
            }
        }
    })
}

//获取form组件
let edit_formRef = ref()
//编辑弹窗
let edit_dialogVisible = ref(false)
//添加model
let edit_form = ref({ name: '' });

let edit = (node, data) => {
    //缓存
    current_node.value = node;
    // current_data.value = data;
    //还原表单
    edit_form.value = { ...data }
    // console.log( typeof{ ...data });
    //打开弹窗
    edit_dialogVisible.value = true;
}
//编辑分类
let handleEdit = (formEl) => {
    formEl.validate(async (valid) => {
        if (valid) {
            let { status, msg } = await cate.edit({ ...edit_form.value });
            if (status) {
                //更新DOM
                current_node.value.data = { ...edit_form.value };
                edit_dialogVisible.value = false;
            } else {

            }

        }
    })
}
//删除分类
let remove = (node, data) => {
    ElMessageBox.confirm('确定要删除此分类?', { type: 'warning' })
        .then(async () => {
            let { status, msg } = await cate.remove({ id: data.id });
            if (status) {
                //更新DOM
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex((d) => d.id === data.id)
                children.splice(index, 1);
                tree.value = [...tree.value];
                //消息提醒
                ElMessage.success(msg)
            } else {
                ElMessage.error(msg);
            }
        })
        .catch(() => {
            ElMessage.info('取消成功！');
        })
}
</script>
<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>